{% extends "base.html" %}

{% block content %}
<div class="welcome-container">
    <div class="welcome-content">
        <h2 class="welcome-title">欢迎使用特种设备焊接考试平台</h2>
        <div class="auth-options">
            <a href="{{url_for('login')}}" class="login-btn">登录</a>
        </div>
    </div>
</div>

<style>
    /* 欢迎页面样式 */
    .welcome-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: calc(100vh - 200px); /* 减去页眉页脚高度 */
        padding: 20px;
    }

    .welcome-content {
        text-align: center;
        max-width: 600px;
        width: 100%;
        padding: 40px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .welcome-title {
        color: #4285f4;
        margin-bottom: 30px;
        font-size: 28px;
    }

    .auth-options {
        margin-top: 30px;
    }

    .login-btn {
        display: inline-block;
        padding: 12px 30px;
        background-color: #4285f4;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 2px solid #4285f4;
    }

    .login-btn:hover {
        background-color: white;
        color: #4285f4;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .welcome-content {
            padding: 30px 20px;
        }

        .welcome-title {
            font-size: 24px;
        }

        .login-btn {
            padding: 10px 25px;
            font-size: 15px;
        }
    }
</style>
{% endblock %}